import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../common/app_color.dart';

class PopUpMenuButton<T extends PopUpMenuItem> extends StatefulWidget {
  final PopUpMenuButtonViewModel<T> viewModel;

  final String menuTip;
  final Color? color;

  final Function(T)? onSelected;

  const PopUpMenuButton({
    Key? key,
    required this.viewModel,
    required this.menuTip,
    this.onSelected,
    this.color,
  }) : super(key: key);

  @override
  _PopUpMenuButtonState createState() => _PopUpMenuButtonState();
}

class _PopUpMenuButtonState<T extends PopUpMenuItem>
    extends State<PopUpMenuButton<T>> {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<PopUpMenuButtonViewModel<T>>.value(
      value: widget.viewModel,
      builder: (context, child) {
        PopUpMenuButtonViewModel<T> viewModel = context.watch();
        return  DropdownButtonHideUnderline(
          child: DropdownButton2(
            isExpanded: true,
            hint: const Text(
              '请选择设备',
              style: TextStyle(
                fontSize: 14,
                color: AppColors.c33,
              ),
              overflow: TextOverflow.ellipsis,
            ),
            items: viewModel.list
                .map((item) => DropdownMenuItem<T>(
              value: item,
              child: Text(
                item.menuItemTitle,
                style: const TextStyle(
                  fontSize: 14,
                  color: AppColors.c33,
                ),
                overflow: TextOverflow.ellipsis,
              ),
            ))
                .toList(),
            value: viewModel._selectValue,
            onChanged: (model) {
              setState(() {
                viewModel.selectValue = model as T;
              });
            },
            iconSize: 24,
            buttonHeight: 44,
            buttonWidth: 160,
            buttonPadding: const EdgeInsets.only(left: 14, right: 14),
            buttonElevation: 12,
            itemHeight: 40,
            itemPadding: const EdgeInsets.only(left: 14, right: 14),
            dropdownWidth: 160,
            dropdownPadding: null,
            dropdownDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              color: AppColors.white,
            ),
            dropdownElevation: 8,
            scrollbarRadius: const Radius.circular(4),
            scrollbarThickness: 6,
            scrollbarAlwaysShow: true,
            offset: const Offset(10, 0),
          ),
        );
      },
    );
  }
}

class PopUpMenuItem<T> {
  String menuItemTitle;

  PopUpMenuItem(this.menuItemTitle);
}

class PopUpMenuButtonViewModel<T extends PopUpMenuItem> extends ChangeNotifier {
  List<T> _list = [];

  List<T> get list => _list;

  T? _selectValue;

  T? get selectValue => _selectValue;

  PopUpMenuButtonViewModel();

  set list(List<T> values) {
    _list = values;
    notifyListeners();
  }

  set selectValue(T? value) {
    _selectValue = value;
    notifyListeners();
  }

  void reset() {
    if (list.isEmpty) {
      selectValue = null;
    } else {
      selectValue = list.first;
    }
  }
}
